import ReactDOM from 'react-dom'
import { Component } from 'react'
// 类组件定义状态
class App extends Component {
  state = {
    count: 0
  }
  // onMouseEnter 的处理函数
  // 参数默认是事件对象,事件对象可以组织默认事件和冒泡事件的发生
  handleMouseEnter(e) {
    console.log('onMouseEnter');
  }
  handleClick(e) {
    // 组织默认事件发生(组织点击a链接就发生跳转的行为)
    // 默认行为
    e.preventDefault()
    // 事件冒泡
    e.stopPropagation()
    console.log('onClick');
    console.log(e);
  }
  render() {
    return (
      <div>
        {/* 1.绑定事件规则,on +事件名称 = {处理函数} ,事件名称遵循大驼峰 */}
        <div onMouseEnter={this.handleMouseEnter}>计数器:{this.state.count}</div>
        <a href="http://www.itcast.cn" onClick={this.handleClick}>传智播客</a>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))
